<template>
    <div>
        <div class="right-body">
            <div class="operation-layout">
                <div class="operation-list">
                    <ul>
                        <!-- <li>
                            <a>私信</a>
                            <div class="after"></div>
                        </li> -->
                        <li :class="[activeIndex == 0 ? 'active' : '']" @click="activeIndex = 0,getMessageByUserIdAndType()">
                            <a>系统消息</a>
                            <div class="after"></div>
                        </li>
                        <li :class="[activeIndex == 1 ? 'active' : '']" @click="activeIndex = 1,getMessageByUserId()">
                            <a>互动消息</a>
                            <div class="after"></div>
                        </li>
                    </ul>
                    <div class="operation-new">
                        <a @click="deleteMessageByListId()"><i class="delete"></i>删除</a>
                        <!-- <a>标记为已读</a> -->
                    </div>
                </div>
            </div>

            <!-- interaction begin -->
            <div class="interaction-layout">
                <ul class="news-list" v-if="activeIndex == 0">
                    <li v-for="(item,index) in xtMessageArr" :key="index">
                        <a>
                            <div class="new-checkbox">
                                <span class="checkbox_square" :class="[item.isChecked ? 'checked' : '']" @click="isChecked(item)">
                                    <input  name="minimal-radio"  type="checkbox">
                                </span>
                            </div>

                            <div class="new-title">
                                <h2>{{item.title}}</h2>
                                <p>{{item.descript}}</p>
                            </div>
                            <div class="new-time">
                                {{$time1(item.createTime)}}
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="interaction" v-else v-for="(item,index) in hdMessage" :key="index">
                    <div class="interaction-title">
                        <div class="new-checkbox">
                            <span class="checkbox_square" :class="[item.isChecked ? 'checked' : '']" @click="isChecked(item)">
                                <input name="minimal-radio"  type="checkbox">
                            </span>
                            <!-- <span class="checkbox_square checked">
                                <input  name="minimal-radio"  type="checkbox">
                            </span> -->
                        </div>
                        <div class="sta">
                            {{item.title}}
                        </div>
                        <div class="time">
                            {{$time1(item.createTime)}}
                            <a @click="deleteMessage(item.id)"><i class="delete" style="opacity:0;"></i></a>
                        </div>
                    </div>
                    <div class="interaction-view">
                        <div class="interaction-view-tl">
                            <img :src="$imgPath(item.sendUser.headImg)">
                        </div>
                        <div class="interaction-view-list">
                            <div v-for="(itemDetail,indexDetail) in item.descriptArr" :key="indexDetail">
                                <span>{{itemDetail.substring(0,4)}}</span>
                                {{itemDetail.substring(5)}}
                            </div>
                        </div>
                        <div class="interaction-view-bt">
                            <a @click="link(item)">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-layout">
                <Page :total="total" show-elevator  @on-change="change" />
            </div>
            <!--page  end-->
            <!-- <div class="interaction-view-layout">
                <div class="interaction-view-head">
                    <h2>双节大狂欢</h2>
                    <p>2018-09-26</p>
                </div>
                <div class="interaction-view-body">
                    <p class="m-top-30">迎中秋，活动时间：2018.09.21~2018.10.07</p>

                    <p>活动规则：</p>

                    <p>1）活动期间您赠送给TA有关中秋活动专属指定礼物（月饼、荷花、玉兔），即可领取平台限量绝版装扮。</p>

                    <p>2）活动期间您只要达到指定礼物赠送数量即可领取装扮（注：每款装扮只能领取一次）</p>

                    <p>3）活动期间，绝版装扮限量领取，先到先得。</p>

                    <p>4）活动结束（10月7日23:59），三个礼物榜TOP5的用户，平台赠送指定礼物，客服小姐姐会联系您哦！</p>

                    <p>5）在参与活动过程中，如果出现作弊行为（如批量注册、恶意购买、虚假交易等），刀锋电竞将取消您本次活动权利。</p>



                    <p class="m-top-70">庆国庆，活动时间：2018.09.21~2018.10.07</p>

                    <p>活动规则：</p>

                    <p>1）活动期间，如果你是陪陪：每一笔订单金额*100，则获取相应的闪耀值；如果你是老板：每一笔订单金额*100，则获取相应的豪气值；</p>  

                    <p>闪耀榜NO.1，获赠七天APP开屏页霸屏资格。豪气榜NO.1，获赠“白虎”永久坐骑；</p>

                    <p>闪耀榜NO.2，获赠七天PC端首页banner宣传资格。豪气榜NO.2，获赠语音客户端冠名一周；</p>

                    <p>闪耀榜NO.3，获赠金秋主题列表框一个月。 豪气榜NO.3，获赠5个富豪推荐名额3天。</p>

                    <p>2）获得霸屏资格的用户，我们设计师会1V1为您进行专属开屏页设计哦，客服小姐姐会联系您！</p>

                    <p>3）获得实物奖品的用户，活动结束，客服小姐姐会统一联系安排发放。</p>

                    <p>4）在参与活动过程中，如果出现作弊行为（如批量注册、恶意购买、虚假交易等），刀锋电竞将取消您本次活动权利。</p>

                    <p>5）您可在活动期间登录刀锋电竞官网、刀锋电竞APP参与本次活动,一切解释权归刀锋电竞平台所有。</p>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    props:['leftIndex'],
    data(){
        return{
            hdMessage:[],       // 互动消息列表
            page:0,             // 页码
            activeIndex:1,      // 切换
            xtMessageArr:[],    // 系统消息列表
            total:0,            // 列表数量
            ids:{
                'id':[]
            },             // 删除的id数组
        }
    },
    mounted(){
        this.getMessageByUserId()
    },
    methods:{
        //互动消息列表展示
        getMessageByUserId(){
            let that = this
            let url = `?page=${that.page}&size=10&type=''`
            apiHttp.messageIndex.getMessageByUserId(url,'',resp=>{
                if(resp.code==200){
                    for(var p in resp.data.content){
                        resp.data.content[p].isChecked = false
                        resp.data.content[p].descriptArr = that.$pointsString(resp.data.content[p].descript)
                    }     
                    that.hdMessage = resp.data.content
                    this.total = resp.data.totalElements
                }
            })
        },
        //系统消息列表展示
        getMessageByUserIdAndType(){
            let that = this;
            let url = `?page=${that.page}&size=10&type=''`
            apiHttp.messageIndex.getMessageByUserIdAndType(url,'',resp=>{
                if(resp.code==200){
                    for(var p in resp.data.content){
                        resp.data.content[p].isChecked = false
                    }     
                   this.xtMessageArr = resp.data.content
                   this.total = resp.data.totalElements
                }
            })
        }, 
        // 消息选择
        isChecked(item){
            this.ids = {
                'id':[]
            }
            item.isChecked = !item.isChecked
            if(this.activeIndex == 1){
                for(let i = 0; i < this.hdMessage.length; i++){
                    if(this.hdMessage[i].isChecked){
                        this.ids.id.push(this.hdMessage[i].id)
                    }
                }
            }else{
                for(let i = 0; i < this.xtMessageArr.length; i++){
                    if(this.xtMessageArr[i].isChecked){
                        this.ids.id.push(this.xtMessageArr[i].id)
                    }
                }
            }
        },      
        // 查看详情
        link(item){
            if((item.type+'').substring(0,2) == '11'){
                this.$emit('leftIndexTab',0)
            }else if((item.type+'').substring(0,2) == '12'){
                this.$emit('leftIndexTab',4)
            }
        },
        // 删除多条消息
        deleteMessageByListId(){
            apiHttp.apiCenter.deleteMessageByListId(this.ids,resp=>{
                if(resp.code == 200){
                    this.$Message.success('删除成功')
                    if(this.activeIndex == 1){
                        this.getMessageByUserId()
                    }else{
                        this.getMessageByUserIdAndType()
                    }
                }else{
                    this.$Message.error('删除失败')
                }
            })
        },
        // 删除消息
        deleteMessage(id){
            apiHttp.messageIndex.deleteMessage(id,'',resp=>{
                if(resp.code == 200){
                    this.$Message.success('删除成功')
                    this.getMessageByUserId()
                }
            })
        },
        // 页面选择
        change(index){
            this.page = index - 1
            if(this.activeIndex == 0){
                this.getMessageByUserIdAndType()
            }else{
                this.getMessageByUserId()
            }
        }
    }
}
</script>
<style scoped>
.news-list{
    padding-left: 0;
}
.interaction-layout{
    padding-right: 0;
}
</style>


